<template>
  <div ref="line_chart" :style="{height:height,width:width}"/>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/components/Mixins/resize'

export default {
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    title: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: ''
    },
    subtext: {
      type: String,
      default: ''
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    },
    showDataZoom: {
      type: Boolean,
      default: true
    },
    showYLabel: {
      type: Boolean,
      default: true
    },
    showXLabel: {
      type: Boolean,
      default: true
    },
    chartType: {
      type: String,
      default: 'line'
    },
    grid: {
      type: Object,
      default: null
    },
    itemStyle: {
      type: Object,
      default: null
    },
    showAverage: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler() {
        this.initChart()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },
  updated() {
    if (this.chart) {
      this.chart.resize()
    }
  },
  methods: {
    initChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.line_chart)
      }
      if (this.chartData) {
        this.setOptions(this.chartData)
      }
    },
    setOptions({ classify, dataList, dateList, equal, max, min } = {}) {
      const that = this
      const gradeColor = [
        '#e2dbbe',
        '#f3d7b5',
        '#ffc09f',
        '#ffee93',
        '#d0e9ff',
        '#f6d6ff',
        '#999'
      ]
      const pieces = []
      if (classify != null) {
        const classifyList = classify.split(' ')
        if (classifyList.length > 1) {
          for (let j = 0; j < classifyList.length - 1; j++) {
            pieces.push({
              gt: parseInt(classifyList[j]),
              lte: parseInt(classifyList[j + 1]),
              color: gradeColor[j]
            })
          }
          pieces.push({
            gt: parseInt(classifyList[classifyList.length - 1]),
            color: gradeColor[classifyList.length - 1]
          })
        }
      }
      let makeLine = {}
      if (this.showAverage) {
        makeLine = {
          // symbol: 'none',
          label: {
            show: true,
            formatter: ''
          },
          data: [
            {
              type: 'average'
            }
          ]
        }
      }

      if (min) {
        makeLine.data.push({
          label: {
            position: 'middle',
            formatter: that.$t('min') + that.$t('warn')
          },
          lineStyle: {
            type: 'solid',
            color: '#FA3934'
          },
          yAxis: min
        })
      }
      if (max) {
        makeLine.data.push(
          {
            label: {
              position: 'middle',
              formatter: that.$t('max') + that.$t('warn')
            },
            lineStyle: {
              type: 'solid',
              color: '#FA3934'
            },
            yAxis: max
          })
      }
      if (equal) {
        makeLine.data.push({
          label: {
            position: 'middle',
            formatter: that.$t('equal') + that.$t('warn')
          },
          lineStyle: {
            type: 'solid',
            color: '#FA3934'
          },
          yAxis: equal
        })
      }

      const option = {
        title: {
          text: that.title,
          subtext: that.subtext
        },
        xAxis: {
          data: dateList,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#909399',
              fontSize: 10
            }
          }
        },
        toolbox: {
          iconStyle: {
            borderColor: '#a3cdff'
          },
          orient: 'vertical',
          top: 'center',
          feature: {
            dataView: {
              readOnly: false
            },
            magicType: {
              type: ['line', 'bar', 'tiled']
            },
            dataZoom: {},
            restore: {},
            saveAsImage: {
              show: true,
              pixelRatio: 2
            }
            // brush: {
            // }
          }
        },
        grid: {
          left: 20,
          right: 35,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          formatter(params) {
            for (const x in params) {
              return that.$t('date') + ':' + params[x].axisValueLabel + ';' + that.$t('data') + ':' + params[x].value + ' ' + that.unit
            }
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: '{value}' + that.unit
          },
          axisLine: {
            lineStyle: {
              color: '#909399',
              fontSize: 10
            }
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: false
          }
        },
        series: {
          itemStyle: {
            normal: {
              color: '#6fc9e9',
              areaStyle: {
                color: '#d8dff5'
              }
            }
          },
          markPoint: {
            data: [
              {
                type: 'max',
                label: {
                  color: '#FFF'
                }, itemStyle: {
                  color: '#1CD8A8'
                }
              },
              {
                type: 'min',
                label: {
                  color: '#FFF'
                }, itemStyle: {
                  color: '#1CD8A8'
                }
              }
            ]
          },
          markLine: makeLine,
          smooth: true,
          type: that.chartType,
          data: dataList,
          animationDuration: 2800,
          animationEasing: 'cubicInOut',
          label: {
            show: true,
            position: 'bottom', // 位置
            color: '#1CD8A8',
            fontSize: 10,
            distance: 30 // 距离
          } // 柱子上方的数值
        }
      }
      if (this.grid != null) {
        option.grid = this.grid
      }
      if (!this.showYLabel) {
        option.yAxis.show = false
        option.series.label = {
          show: true,
          position: 'top', // 位置
          color: '#1CD8A8',
          fontSize: 10
          // distance: 30 // 距离
        } // 柱子上方的数值
      }
      if (!this.showXLabel) {
        option.xAxis.show = false
      }
      if (pieces.length > 1) {
        option.visualMap = {
          top: 10,
          right: 10,
          pieces: pieces,
          outOfRange: {
            color: '#999'
          }
        }
      }
      if (that.itemStyle != null) {
        option.series.itemStyle = that.itemStyle
      }
      if (that.showDataZoom) {
        option.toolbox.feature.dataZoom = {
          yAxisIndex: 'none'
        }
        option.dataZoom = [
          {
            show: true
            // start: 0,
            // end: 100,
            // realtime: true, // 拖动时，是否实时更新系列的视图
            // handleIcon: 'M0,0 v9.7h5 v-9.7h-5 Z',
            // handleSize: '80%'
            // handleStyle: {
            //   color: '#6f7297',
            //   borderColor: '#738fc2',
            //   shadowBlur: 3,
            //   shadowColor: 'rgba(0, 0.2, 0.2, 0.1)',
            //   shadowOffsetX: 2,
            //   shadowOffsetY: 2
            // }
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>
